<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>数据统计</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
		<link href="static/css/index.css" rel="stylesheet" />
	</head>

	<body>
		<div id="head"></div>
		<div class="i-padded-tb-big i-container">
			<div class="ui container">
				<div class="ui segments">
					<div class="ui segment" style="height: 25em;">
						<div class="ui  horizontal list">
							<div class="item">
								<i class="chart bar icon"></i>
							</div>
							<div class="item">
								<h4 class="ui header">按类型统计</h4>
							</div>
						</div>
						<div class="ui basic segment i-full-height">
							<div id="echart1" class="i-huge-height">
							</div>
						</div>
					</div>
					<div class="ui segment">
						<div class="ui segment" style="height: 25em;">
							<div class="ui  horizontal list">
								<div class="item">
									<i class="chart bar icon"></i>
								</div>
								<div class="item">
									<h4 class="ui header">7天内发布量统计</h4>
								</div>
							</div>
							<div class="ui basic segment i-full-height">
								<div id="echart2" class="i-huge-height">
								</div>
							</div>
						</div>
					</div>
					<div class="ui segment">
						<div class="ui segment" style="height: 25em;">
							<div class="ui  horizontal list">
								<div class="item">
									<i class="chart bar icon"></i>
								</div>
								<div class="item">
									<h4 class="ui header">按月发布量统计</h4>
								</div>
							</div>
							<div class="ui basic segment i-full-height">
								<div id="echart3" class="i-huge-height">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="foot"></div>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script src="static/js/echarts.min.js"></script>
	<script src="static/js/function.js"></script>

	<script>$('.menu.toggle').click(function() {
	$('.i-item').toggleClass('i-mobile-hide');
});
var dateArray = [];
$(function() {
	$('#head').load('common/head.html', null, function() {
		$('.navbarlist a').removeClass('active');
		$('.navbarlist a:eq(5)').addClass('active');
	});
	$('#foot').load('common/foot.html');
	for(var i = 0; i > -7; i--) {
		dateArray.push(getBeforeDate(i));
	}
	dateArray.reverse();

	getEchart1();
	getEchart2();
	getEchart3();
})

function getBeforeDate(n) {
	var n = n;
	var d = new Date();
	var year = d.getFullYear();
	var mon = d.getMonth() + 1;
	var day = d.getDate();
	if(day <= n) {
		if(mon > 1) {
			mon = mon - 1;
		} else {
			year = year - 1;
			mon = 12;
		}
	}
	d.setDate(d.getDate() + n);
	year = d.getFullYear();
	mon = d.getMonth() + 1;
	day = d.getDate();
	s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
	return s;
}

function getEchart1() {
	var total;
	var title;
	var data;
	$.ajax({
		type: "post",
		url: urlPath + "/index/api/getEchartDataByType",
		async: false,
		success: function(res) {
			if(res.code == 200) {
				total = res.data.total;
				title = res.data.title;
				data = res.data.data;
			}
		}
	});

	var myChart = echarts.init(document.getElementById('echart1'));

	option = {
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b}: {c} ({d}%)"
		},
		legend: {
			orient: 'vertical',
			x: 'left',
			data: title
		},
		series: [{
			type: 'pie',
			radius: ['40%', '60%'],
			avoidLabelOverlap: false,
			label: {
				normal: {
					show: true,
					position: 'center',
					formatter: function(arg) {
						return total;
					},
					textStyle: {
						fontSize: 30,
						color: '#2c13f7'
					}
				}
			},
			labelLine: {
				normal: {
					show: false
				}
			},
			data: data
		}]
	};
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});

}

function getEchart2() {
	var data;
	$.ajax({
		url: urlPath + "/index/api/getEchartDataOneWeek",
		async: false,
		type: "post",
		success: function(res) {
			if(res.code == 200) {
				data = res.data;
			}
		}
	})

	var myChart = echarts.init(document.getElementById('echart2'));
	option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: '#dddc6b'
				}
			}
		},
		grid: {
			left: '10',
			top: '10',
			right: '10',
			bottom: '10',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			data: dateArray,
			boundaryGap: false,
			axisLabel: {
				interval: 0,
				rotate: 45,
				textStyle: {
					color: "rgba(158,158,158,1)",
					fontSize: 12,
				},
			},
		}, {
			axisPointer: {
				show: false
			},
			axisLine: {
				show: false
			},
			position: 'bottom',
			offset: 20,
		}],
		yAxis: {
			type: 'value',
			boundaryGap: false,
			axisTick: {
				show: false
			},
			splitLine: {
				show: false,
			},
		},
		series: [{
			data: data,
			type: 'line'
		}]
	};
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}

function getEchart3() {
	var dataAxis;
	var data;
	$.ajax({
		url: urlPath + "/index/api/getEchartDataOneYear",
		async: false,
		type: "post",
		success: function(res) {
			if(res.code == 200) {
			    dataAxis = res.data.date;
			    data = res.data.data;
			}
		}
	})
	
	var myChart = echarts.init(document.getElementById('echart3'));
	
	var yMax = 50;
	var dataShadow = [];

	for(var i = 0; i < data.length; i++) {
		dataShadow.push(yMax);
	}

	option = {
		title: {

		},
		xAxis: {
			data: dataAxis,
			axisLabel: {
				inside: false,
				textStyle: {
					color: '#9E9E9E'
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			z: 10
		},
		yAxis: {
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				textStyle: {
					color: '#999'
				}
			}
		},
		dataZoom: [{
			type: 'inside'
		}],
		series: [{ // For shadow
				type: 'bar',
				itemStyle: {
					color: 'rgba(0,0,0,0.05)'
				},
				barGap: '-100%',
				barCategoryGap: '40%',
				data: dataShadow,
				animation: false
			},
			{
				type: 'bar',
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1, [{
								offset: 0,
								color: '#83bff6'
							},
							{
								offset: 0.5,
								color: '#188df0'
							},
							{
								offset: 1,
								color: '#188df0'
							}
						]
					)
				},
				emphasis: {
					itemStyle: {
						color: new echarts.graphic.LinearGradient(
							0, 0, 0, 1, [{
									offset: 0,
									color: '#2378f7'
								},
								{
									offset: 0.7,
									color: '#2378f7'
								},
								{
									offset: 1,
									color: '#83bff6'
								}
							]
						)
					}
				},
				data: data
			}
		]
	};

	// Enable data zoom when user click bar.
	var zoomSize = 6;
	myChart.on('click', function(params) {
		console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
		myChart.dispatchAction({
			type: 'dataZoom',
			startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
			endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
		});
	});
	
	myChart.setOption(option);
}</script>

</html>